<template>
  <div class="allpage">
    <!-- 供应商报表 -->
    <el-form
      :inline="true"
      :model="formInline"
      label-width="80px"
      class="form-style"
      ref="formInline"
    >
      <el-row style="border-bottom: 1px solid #eeeeee">
        <el-col :span="8">
          <el-form-item
            label="供应商："
            prop="region"
            style="margin: 15px 0 15px 30px"
          >
            <el-select
              v-model="formInline.region"
              placeholder="全部"
            >
              <!--  id="options" @change="SelectChange($event)" -->
              <el-option
                v-for="(gbitem, gbindex) in options"
                :key="gbindex"
                :label="gbitem.SupplierName"
                :value="gbitem.SupplierId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="time" style="margin: 15px 0 15px 30px">
            <el-date-picker
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="formInline.startTime"
              type="date"
              placeholder="选择开始日期"
              @change="getSTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="time" style="margin: 15px 0 15px 30px">
            <el-date-picker
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="formInline.endTime"
              type="date"
              placeholder="选择结束日期"
              @change="getTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="margin: 15px 0 15px 30px">
            <el-button
              icon="el-icon-refresh"
              type="warning"
              @click="clean('formInline')"
              >重置</el-button
            >
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="search('formInline')"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-button
        style="margin: 15px 0 15px 30px"
        icon="el-icon-document"
        @click="exportExcel"
        type="success"
        >导出报表</el-button
      >
    </el-form>
    <div class="table-style">
      <el-form :inline="true" :model="form" class="form-dis">
        <el-form-item
          v-for="(item, index) in tableList"
          :key="index"
          :label="item.label"
          style="color: red; margin: 10px 0 0 20px"
          >￥{{ item.value }}</el-form-item>
      </el-form>
      <el-table border :data="tableData" id="out-table">
        <el-table-column label="总金额" width="350" prop="AllCostPriceStr"></el-table-column>
        <el-table-column label="订单编号" width="140" prop="OrderNumber"></el-table-column>
        <el-table-column label="收货人" prop="ReceivingName">
          <template slot-scope="scope">
            <div v-if="scope.row.ReceivingName === ''" style="color:red;">未填写收货人</div>
            <div v-else>{{ scope.row.ReceivingName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品" width="250" prop="ProductName"></el-table-column>
        <el-table-column label="团购价" prop="CostPrice">
          <template slot-scope="scope">
            <p style="color: red">￥{{ scope.row.CostPrice }}</p>
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="WorkPrice"></el-table-column>
        <el-table-column label="总采购价" prop="AllCostPrice"></el-table-column>
        <el-table-column label="总团购价">--</el-table-column>
        <el-table-column label="团长提成">--</el-table-column>
        <el-table-column label="毛利" prop="maoli">--</el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template> 

<script>
import Botpage from "@/components/botpage/Botpage";
import { SUOrderFinanceToExcellApi, LoadSuppliers, SUOrderFinanceByTime } from "@/request/api";
import XLSX from "xlsx";
import FileSaver from "file-saver";
import axios from 'axios'
import qs from 'qs'
export default {
  mounted() {
    this.getTableDatas();
    this.getSelect();
    console.log(this.getTableDatas);
    console.log(this.getSelect);
  },
  methods: {
    //table数据获取
    getTableDatas() {
      SUOrderFinanceToExcellApi({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        ScreenValues: 0,
        OtherValues: "SU",
        StartTime : this.formInline.StartTime,
        EndTime : this.formInline.EndTime,
        SupplierId: this.formInline.region
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      this.getTableDatas()
    },
    //select栏
    getSelect() {
      LoadSuppliers()
        .then((res) => {
          this.options = res.Data;
          console.log(this.options);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //导出报表
    exportExcel() {
      this.search();
      axios({
        method: "post",
        url: this.base + "api/Adm_Order/Adm_SUOrderFinanceToExcel/",
        data: qs.stringify({
          GBNumber : 0,
          OtherValues : 1,
          SupplierId : this.formInline.region,
          StartTime : this.formInline.startTime,
          EndTime : this.formInline.EndTime,
          SupplierId : this.formInline.region
        }),
      })
        .then((response) => {
          const content = response.data.Data;
          if( content){
            window.location.href = this.base + content
          }else{
            this.$message({
              type: 'warning',
              message: '暂无数据'
            })
          }
         
        })
        .catch((error) => {});
        // var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      // var wbout = XLSX.write(wb, {
      //   bookType: "xlsx",
      //   bookSST: true,
      //   type: "array",
      // });
      // try {
      //   FileSaver.saveAs(
      //     new Blob([wbout], { type: "application/octet-stream" }),
      //     "sheetjs.xlsx"
      //   );
      // } catch (e) {
      //   if (typeof console !== "undefined") console.log(e, wbout);
      // }
      // return wbout;
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableDatas()
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    getSTime(val) {
      this.formInline.StartTime = val;
      console.log(this.formInline.StartTime)
    },
    getTime(val) {
      this.formInline.EndTime = val;
      console.log(this.formInline.EndTime)
    }
  },
  data() {
    return {
      timestampToTime:'',
      form: {},
      currentPage: 1,
      PageSize: 10,
      total: 1,
      tableData: [],
      options: [],
      formInline: {},
      base:"http://gbtest.xiniuauto.com/",
      tableList: [
        { label: "总采购价：", value: "300" },
        { label: "订单总数：", value: "3000" },
        { label: "成交总额：", value: "1300" },
        { label: "团长提成：", value: "600" },
        { label: "毛利：", value: "2330" },
      ],
    };
  },
  components: {
    Botpage,
  },
};
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
</style>